import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class TestWrapWidget extends StatefulWidget {
  const TestWrapWidget({super.key});

  @override
  State<TestWrapWidget> createState() {
    return _WrapState();
  }
}

class _WrapState extends State<TestWrapWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("基础 Wrap 流式布局 学习使用"),
      ),
      body: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text("流式布局 水平布局 文本溢出 使用 Row 布局"),
            Row(
              children: <Widget>[Text("xxx" * 100)],
            ),
            const Text("\n流式布局 水平布局 文本溢出 使用 Wrap 布局"),
            Wrap(
              children: <Widget>[Text("xxx" * 100)],
            ),
            const Text("\n流式布局 水平布局 spacing 主轴方向子widget的间距 = 4"),
            Wrap(
              spacing: 4,
              children: const <Widget>[
                Text("xxx"),
                Text("xxx"),
                Text("xxx"),
                Text("xxx"),
                Text("xxx"),
                Text("xxx"),
                Text("xxx"),
              ],
            ),
            const Text("\n流式布局 水平布局 spacing 主轴方向子widget的间距 = 8"),
            Wrap(
              spacing: 8,
              children: const <Widget>[
                Text("xxx"),
                Text("xxx"),
                Text("xxx"),
                Text("xxx"),
                Text("xxx"),
                Text("xxx"),
                Text("xxx"),
              ],
            ),
            const Text("\n流式布局 水平布局 spacing 主轴方向子widget的间距 = 8 , 纵轴方向 runSpacing: 5,"),
            Wrap(
              spacing: 10,
              runSpacing: 5,
              children: const <Widget>[
                Text("xxxxxx"),
                Text("xxxxxx"),
                Text("xxxxxx"),
                Text("xxxxxx"),
                Text("xxxxxx"),
                Text("xxxxxx"),
                Text("xxxxxx"),
                Text("xxxxxx"),
                Text("xxxxxx"),
                Text("xxxxxx"),
                Text("xxxxxx"),
                Text("xxxxxx"),
              ],
            ),
            const Text("\n流式布局 水平布局 spacing 主轴方向子widget的间距 = 8 , 纵轴方向 runSpacing: 10,"),
            Wrap(
              spacing: 10,
              runSpacing: 5,
              children: const <Widget>[
                Text("xxxxxx"),
                Text("xxxxxx"),
                Text("xxxxxx"),
                Text("xxxxxx"),
                Text("xxxxxx"),
                Text("xxxxxx"),
                Text("xxxxxx"),
                Text("xxxxxx"),
                Text("xxxxxx"),
                Text("xxxxxx"),
                Text("xxxxxx"),
                Text("xxxxxx"),
              ],
            ),
            const Text("\n流式布局 水平布局 纵轴对齐方式 runAlignment: WrapAlignment.center"),
            Wrap(
              spacing: 10,
              runSpacing: 5,
              runAlignment: WrapAlignment.center,
              children: const <Widget>[
                Text("xxxxxx"),
                Text("xxxxxx"),
                Text("xxxxxx"),
                Text("xxxxxx"),
                Text("xxxxxx"),
                Text("xxxxxx"),
                Text("xxxxxx"),
                Text("xxxxx"),
                Text("xxxx"),
                Text("xxx"),
                Text("xx"),
                Text("x"),
              ],
            ),
            const Text("\n流式布局 水平布局 纵轴对齐方式 runAlignment: WrapAlignment.end"),
            Wrap(
              spacing: 10,
              runSpacing: 5,
              runAlignment: WrapAlignment.end,
              children: const <Widget>[
                Text("xxxxxx"),
                Text("xxxxxx"),
                Text("xxxxxx"),
                Text("xxxxxx"),
                Text("xxxxxx"),
                Text("xxxxxx"),
                Text("xxxxxx"),
                Text("xxxxx"),
                Text("xxxx"),
                Text("xxx"),
                Text("xx"),
                Text("x"),
              ],
            ),
            const Text("\n流式布局 水平布局 WrapAlignment.start WrapAlignment.center"),
            ConstrainedBox(
              constraints: const BoxConstraints(minWidth: double.infinity , minHeight: 100),
              child: Container(
                color: Colors.blue,
                child: Wrap(
                  spacing: 10,
                  runSpacing: 5,
                  runAlignment: WrapAlignment.start,
                  alignment: WrapAlignment.center,
                  children: const <Widget>[
                    Text("xxxxxx"),
                    Text("xxxxxx"),
                    Text("xxxxxx"),
                    Text("xxxxxx"),
                    Text("xxxxxx"),
                    Text("xxxxxx"),
                    Text("xxxxxx"),
                    Text("xxxxxx"),
                    Text("xxxxxx"),
                    Text("xxxxxx"),
                    Text("xxxxx"),
                    Text("xxxx"),
                    Text("xxx"),
                    Text("xx"),
                    Text("x"),
                  ],
                ),
              )
            ),
            const Text("\n流式布局 水平布局 WrapAlignment.center WrapAlignment.end"),
            ConstrainedBox(
              constraints: const BoxConstraints(minWidth: double.infinity , minHeight: 100),
              child: Container(
                color: Colors.blue,
                child: Wrap(
                  spacing: 10,
                  runSpacing: 5,
                  runAlignment: WrapAlignment.center,
                  alignment: WrapAlignment.end,
                  children: const <Widget>[
                    Text("xxxxxx"),
                    Text("xxxxxx"),
                    Text("xxxxxx"),
                    Text("xxxxxx"),
                    Text("xxxxxx"),
                    Text("xxxxxx"),
                    Text("xxxxxx"),
                    Text("xxxxxx"),
                    Text("xxxxxx"),
                    Text("xxxxxx"),
                    Text("xxxxx"),
                    Text("xxxx"),
                    Text("xxx"),
                    Text("xx"),
                    Text("x"),
                  ],
                ),
              )
            ),

            const Text("\n流式布局 Wrap 该布局是一个长宽仅满足自身内部的widgets的宽高，而非宽度上尽可能的最宽的布局空间"),
            Container(
              color: Colors.blue,
              child: Wrap(
                spacing: 10,
                runSpacing: 5,
                runAlignment: WrapAlignment.center,
                alignment: WrapAlignment.end,
                children: const <Widget>[
                  Text("xxxxx"),
                  Text("xxxx"),
                  Text("xxx"),
                  Text("xx"),
                  Text("x"),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}
